@CHARSET "UTF-8";

/*********************************************/
/* Téléphones et petite tablette en portrait */
/*********************************************/

@MEDIA screen and (max-width: 390px) /*  and (orientation: portrait)  */ {
	
	body {
		font-size: 11px;
		width: 98%;
		margin-left:1%;
		margin-right: 1%;
	}

        
	#corps_page {
	    height: 275px;
	    margin: 5px auto;
	    overflow: auto;
	    text-align: center;
	    width: 96%;
	}
	
	h1 {
		font-size: 1.5em;
   		text-align: center;
   		color: blue;
	}
	
	#menuSuperieur, #menuInferieur {
		background-color: #4B52A2;
		height: 3em;
		width: 96%;
		margin: auto;
	}	
	
	a {
		color: white;
		text-decoration: none;
	}
	
	[placeholder] {
		text-align: center;
	}
	
	#zone_corps_client{
		margin: auto;
	}

	select {
		padding: 2px 0;
	}

	/****************************/
	/*          INPUT           */
	/****************************/
	
	input, textarea, th{
		font-size: 1.1em;
		width: 18em;
		font-style: italic;
	}
	
	input, textarea, td {
		color: blue;
	}

	td {
		overflow: hidden;
		text-overflow: ellipsis;	
	}
	

	input[type=submit], input[type=button]{
		margin: 6px;
		padding: 2px;
		letter-spacing: 0.3px;
		box-shadow: 2px 2px grey;
	}
	
	input[type=text], input[type=email], input[type=password], input[type=tel]  {
		padding: 5px 15px;
		margin: 2px;
	}
	
	input[disabled], textarea[disabled]{
		color: blue;
	}
	
	input[type=image][disabled] {
		display: none;
	}
	
	[type=button] {
		border-radius: 1.2em 1.2em 1.2em 1.2em;
	}
	
	/* Changement de la couleur des placeholder */
	input::-webkit-input-placeholder  {
   		 color:grey;
	}
 
	input:-moz-placeholder {
	    color:grey;
	}
	
	textarea::-webkit-textarea-placeholder{
		color:grey;
	}

	textarea:-moz-placeholder {
	    color:grey;
	}
	
	/* CONTROLE */
	
	#menuSuperieur a:FIRST-CHILD > input {
		left: 5%;
    	position: absolute;
	}
	
	#menuSuperieur a:FIRST-CHILD + a input {
		left: 43%;
    	position: absolute;
	}
	
	#menuSuperieur a:LAST-CHILD > input {
		right: 5%;
    	position: absolute;
	}
	
	
	.bouton_menu {
		margin: 6px;
		width: 25px;
	}
	
/******************************************************/
/********************** ACCUEIL ***********************/
/******************************************************/

	/******************/
	/* ZONE DE GAUCHE */
	/******************/
	
	#zoneGaucheSaisieAccueil {
		float: left;
	    height: 2em;
	    margin-bottom: 0;
	    width: 72%;
	}
	
	#chmpRechercheSaisi {
		width : 100%;
		padding: 4px 2px;
	}
	
	
	/******************/
	/* ZONE DE DROITE */
	/******************/
	
	#zoneDroiteAccueilRecherche {
		float: right;
		width : 25%;
	}
	
	/* Tous les inputs dedans */
	#zoneDroiteAccueilRecherche input {
	    background-color: #878787;
	    border-radius: 1em 1em 1em 1em;
	    color: #FFFFFF;
	    font-size: 11px;
	    padding: 0 2px;
	    text-align: center;
	    width: 100%;
	    word-wrap: break-word;
	}
	
	#optionsAvancees {
		width: 15px
	}
	
	#resultatsRecherche {
		margin-top: 1.35%;
		width: 70.5%;
		float: left;
	}
	
	#sous_vue_ligne_1, #sous_vue_ligne_2, #vue_aucun_client, #vue_aucun_code {
		border-radius: 0.55em 0.55em 0.55em 0.55em;
		font-style: italic;
	    float: left;
	    padding: 5px 0;
	    text-align: center;
	    width: 100%;
	}
	
	#vue_aucun_client {
		background-color: orange;
		color: white;
	}
	
	.bouton_presentation {
		background-color: blue;
		color: white;
		letter-spacing: 0.3px;
		box-shadow: 2px 2px blue;
		font-style: italic;
		font-weight: bold;
		font-size: 1.3em;
	}
	
/******************************************************/
/*******************  CLIENTS  ************************/
/******************************************************/

	#selectCommune {
		font-size: 11.5px;
		font-weight: bold;
	}

	#submit_nouveau_client, #submit_modif_client {
		width: auto;
		margin-left: 50%;
		background-color: blue;
		color: white;
		letter-spacing: 0.3px;
		box-shadow: 2px 2px blue;
	}
	
/******************************************************/
/**********************  MENU  ************************/
/******************************************************/

	#section_menu {
		text-align: center;
	}

	#section_menu div input{
		
	    margin: 1% 0;
	    padding: 0.5em 0;
	    width: 65%;
	}

/******************************************************/
/************************ CODES  **********************/
/******************************************************/
	
	#tableau_codes {
		margin: auto;
	}
	
	#tableau_codes, #tableau_codes tr, #tableau_codes td {
		border: 2px solid black;
	}
	
	#tableau_codes a {
		color: black;
	}
	
	.case_designation {
		width: 50%;
	
	}
	
	.case_login {
		max-width: 75px;
	
	}

	.case_mdp {
		width: 25%;
	
	}
	
	#tableau_fiche_code th {
		text-align: right;
	}
	
	#tableau_fiche_code td {
		height: 1em;
	}
	
	
	#th_divers_codes {    
		color: #4B52A2;
	    font-size: 1.4em;
	    letter-spacing: 6px;
	    padding-top: 38px;
	    transform: rotate(-90deg);

	}
	
	#form_ajout_codes input[type=submit] {
		margin-top: 2%;
		margin-left: 65%;
	}
	
/******************************************************/
/********************** CLASSES  **********************/
/******************************************************/
	
	.text-align {
		text-align: center;
	}
	
	.bleu_clair {
		background-color: #7D83D1;
	}
	
	.bleu_fonce {
		background-color: #9397D1;
	}
	
	.succes {
		background-color: #008000;
	    border-radius: 15px 15px 15px 15px;
	    color: #FFFFFF;
	    margin: auto;
	    padding: 10px;
	    text-align: center;
	    width: 60%;
	}
	
	.erreur {
		background-color: orange;
		padding: 10px;
		color: white;
		text-align: center;
		margin: auto;
		border-radius: 15px 15px 15px 15px;
		width: 60%;
	}
	
	.aucun {
		background-color: orange;
		padding: 10px;
		color: white;
		text-align: center;
		margin: auto;
		border-radius: 15px 15px 15px 15px;
		width: 60%;
	}
}
